import React,{Fragment} from "react"
import Mycss from "./style/index.module.css"
import fanhui from "./img/后退.png"
import xihuan from "./img/喜欢.png"
import download from "./img/下载管理.png"
import pinglun from "./img/评论.png"
import yinxiao from "./img/音效.png"
class Song extends React.Component{
    constructor(){
        super()
        this.state={
            songUrl:"",
            picUrl:"",
            songName:"",
            songMes:[],
            singers:[]
        }
    }
    componentWillMount(){
        const songid=this.props.location.songid
        fetch(`http://106.12.79.128:666/song/url?id=${songid}`,{
            credentials:'include'
        })
        .then(body=>body.json())
        .then(res=>{
            this.setState({
                songUrl:res.data[0].url
            })
        })
        fetch(`http://106.12.79.128:666/song/detail?ids=${songid}`,{
            credentials:'include'
        })
        .then(body=>body.json())
        .then(res=>{
            console.log(res)
            this.setState({
                picUrl:res.songs[0].al.picUrl,
                songName:res.songs[0].name,
                songMes:res.songs[0].alia,
                singers:res.songs[0].ar
            })
            console.log(this.state.singers)
            // console.log(this.state.songMes)
        })
    }
    // componentDidMount() {
    //     this.props.history.listen(({ pathname }) => {
    //    if(pathname =="/latestplay"){
    //       console.log(1111)
    //    }
    //     })
    // }
    gotopinglun(){
        const songid=this.props.location.songid
        const playlistid=this.props.location.playlistid
        // const id=this.props.location.id
        this.props.history.push({pathname:"/comment",playlistid,songid})
    }
    fanhui(){
    const pathName=localStorage.getItem('pathName')
    // const id=this.props.location.id
    const songid=this.props.location.songid
    const playlistid=this.props.location.playlistid
    if(pathName){
        this.props.history.push({pathname:"/latestplay"})
        localStorage.removeItem("pathName")
    }
    else{
        this.props.history.push({pathname:"/playlist",songid,playlistid})
    }
    }
render(){
    return(
       <Fragment>
        <div className={Mycss.gequDetails}>
        <div className={Mycss.toptop}>
        <div className={Mycss.fanhui}><img src={fanhui} alt="" className={Mycss.fanhuiicon} onClick={this.fanhui.bind(this)}/></div>
    <div className={Mycss.toptop2}>{this.state.songName}{this.state.songMes.length===0?"":`(${this.state.songMes})`}</div>
        {/* <div className={Mycss.toptop3}>{this.state.singers.length===1?`${this.state.singers[0].name}`:`${this.state.singers[0].name}/${this.state.singers[1].name}`}</div> */}
        </div>
        <div className={Mycss.gequPics}><img src={this.state.picUrl} alt="" className={Mycss.gequPic}/></div>
        <div className={Mycss.sigeicons}>
            <div className={Mycss.xihuan}><img src={xihuan} alt="" className={Mycss.xihuanicon}/></div>
            <div className={Mycss.download}><img src={download} alt="" className={Mycss.downloadicon}/></div>
            <div className={Mycss.yinxiao}><img src={yinxiao} alt="" className={Mycss.yinxiaoicon}/></div>
            <div className={Mycss.pinglun}><img src={pinglun} alt="" className={Mycss.pinglunicons} onClick={this.gotopinglun.bind(this)}/></div>
        </div>
        {/* <audio src={this.state.songUrl} autoPlay="autoplay" controls className={Mycss.audioStyle}></audio> */}
       <div className={Mycss.audioStyles}><audio src={this.state.songUrl} controls className={Mycss.audioStyle}
       style={{background:"#000"}}></audio></div>
        </div>
        </Fragment>
    )
}
}
export default Song